<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立即预定</title>
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap-icons/bootstrap-icons.css">
    <script src="./bootstrap-4.6.2-dist/js/jquery-3.7.1.min.js"></script>
    <script src="./bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
</head>

<style>
    body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        color: #333;
        line-height: 1.6;
    }

    a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease;
    }

    a:hover {
        color: #ffc107;
    }

    /* 导航栏 */
    .navbar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand {
        font-size: 2rem;
        font-weight: 700;
        color: #ffc107 !important;
    }

    .nav-link {
        margin: 0 0.5rem;
        font-weight: 500;
    }

    /* 登录界面 */
    .login-modal .modal-content {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .login-modal .modal-header {
        border-bottom: none;
    }

    .login-modal .form-control:focus {
        border-color: #ff6b00;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25);
    }

    .login-btn {
        background-color: #ff6b00;
        border-color: #ff6b00;
        transition: all 0.3s;
    }

    .login-btn:hover {
        background-color: #e65e00;
        transform: translateY(-2px);
    }

    .forgot-password {
        color: #666;
        font-size: 14px;
        transition: color 0.3s;
    }

    .forgot-password:hover {
        color: #ff6b00;
        text-decoration: underline;
    }

    .my-pills .nav-link.active {
        color: #000;
        font-weight: bolder;
        background-color: white !important;
        border-bottom: 2px solid #000;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-color: #007bff !important;
    }

    /* 左侧进度导航栏 */
    .sidebar {
        background-color: #1c3b70;
        color: #fff;
        padding: 20px;
        height: 1083px;
    }

    .sidebar h6 {
        font-weight: bold;
        margin-bottom: 10px;
    }

    .progress-steps {
        list-style: none;
        padding: 0;
    }

    .progress-steps li {
        margin-bottom: 20px;
        position: relative;
        padding-left: 30px;
    }

    .progress-steps li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
    }

    .progress-steps li.active::before {
        background-color: #ffc107;
    }

    .booking-summary {
        background-color: #fff;
        padding: 15px;
        border-radius: 4px;
        margin-top: 20px;
    }

    .booking-summary img {
        width: 100%;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    /* 右侧主要内容 */
    .main-content {
        padding: 30px;
    }

    .service-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .service-cards {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }

    .service-card {
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 15px;
        width: 33.33%;
        text-align: center;
    }

    .service-card img {
        width: 100%;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .btn-back {
        background-color: #fff;
        border: 1px solid #ccc;
        margin-right: 10px;
    }

    .btn-continue {
        background-color: #1c3b70;
        color: #fff;
    }

    /* 页脚 */
    footer {
        background-color: #1c3b70;
        color: #fff;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 800px;
            margin: 1.75rem auto;
        }
    }
</style>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href=" ">HUAN</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ml-auto d-flex justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="./index.html">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="./客房.html">客房</a></li>
                    <li class="nav-item"><a class="nav-link" href="./餐饮.html">餐饮</a></li>
                    <li class="nav-item"><a class="nav-link" href="./关于我们.html">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="tel:4008888888"><svg
                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-phone" viewBox="0 0 16 16">
                                <path
                                    d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
                                <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                            </svg>400 888 8888</a></li>
                    <li class="nav-item"><a class="btn btn-warning" href="#">立即预订</a></li>
                    <li class="nav-item mx-2 ms-auto"><a href="#loginModal" class="btn btn-primary"
                            data-toggle="modal">登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" data-dismiss="modal" class="close" aria-lable="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="row mt-5">
                        <div class="col">
                            <p> 扫码</p>
                            <img src="./img/1.gif" height="300px" width="300px" alt="">
                        </div>
                        <div class="col">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills my-pills" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home"
                                        type="button">账号登陆</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile"
                                        type="button">短信登陆</button>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content mt-3">
                                <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <form action="">
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control"
                                                placeholder="请输入账号/邮箱">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入密码">
                                        </div>
                                        <div class="form-group text-right">
                                            <a href="">忘记密码?</a>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <form action="">
                                        <div class="form-group small text-muted">
                                            验证即登录，未注册将自动创建账号
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入手机号">
                                        </div>
                                        <div class="form-group position-relative">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入验证码">
                                            <a class="position-absolute border-left px-2"
                                                style="right: 5px; top:5px">获取验证码</a>
                                        </div>
                                        <div class="form-group mt-5">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer  justify-content-between">
                    <div>
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-qzone.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-tsina.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-weixin.png" alt="">
                    </div>
                    <a href="">立即注册</a>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <!-- 左侧侧边栏 -->
            <div class="col-md-3 sidebar">
                <h6>您的预订进度</h6>
                <ul class="progress-steps">
                    <li>房型选择</li>
                    <li class="active">填写信息</li>
                    <li>附加服务</li>
                    <li>支付方式</li>
                    <li>确认订单</li>
                </ul>
                <div class="booking-summary text-dark">
                    <img src="./img/2.jpg" alt="房间">
                    <h6>豪华海景套房</h6>
                    <p>入住日期：2023年11月15日</p>
                    <p>退房日期：2023年11月20日</p>
                    <p>住宿天数：5晚</p>
                    <p>成人：2位</p>
                    <p>儿童：1位</p>
                    <p>房费（5晚）：¥12500</p>
                    <p>税费：¥1250</p>
                    <p>总计：¥13750</p>
                    <p class="text-muted small">免费取消政策：在2023年11月10日前取消可全额退款</p>
                </div>
            </div>
            <!-- 右边内容 -->
            <div class="col-md-9 main-content">
                <h2 class="mb-4">附加服务</h2>
                <p class="text-muted small">为您的住宿体验带来更多舒适与便利，请选择您需要的附加服务。</p>
                <!-- 早餐选择 -->
                <div class="mb-4">
                    <h5 class="service-title">
                        <svg class="bi bi-cup text-warning" width="1em" height="1em" viewBox="0 0 16 16"
                            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M12 4H4v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4zM3 3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V3H3z" />
                            <path fill-rule="evenodd"
                                d="M14.5 5.5h-2v-1h2A1.5 1.5 0 0 1 16 6v4a1.5 1.5 0 0 1-1.5 1.5h-2v-1h2a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5z" />
                        </svg>早餐选择
                    </h5>
                    <div class="service-cards">
                        <div class="service-card">
                            <img src="./img/早餐1.jpg" height="300px" alt="欧式早餐">
                            <h6>欧式早餐</h6>
                            <p>新鲜面包、水果、酸奶和咖啡</p>
                            <p>¥98/人</p>
                            <button class="btn btn-primary btn-sm">选择</button>
                        </div>
                        <div class="service-card">
                            <img src="./img/早餐2.jpeg" height="300px" alt="美式早餐">
                            <h6>美式早餐</h6>
                            <p>煎蛋、培根、松饼和橙汁</p>
                            <p>¥128/人</p>
                            <button class="btn btn-primary btn-sm">选择</button>
                        </div>
                        <div class="service-card">
                            <img src="./img/早餐3.jpg" height="300px" alt="中式早餐">
                            <h6>中式早餐</h6>
                            <p>点心、粥和榨菜</p>
                            <p>¥108/人</p>
                            <button class="btn btn-primary btn-sm">选择</button>
                        </div>
                    </div>
                </div>
                <!-- 接送服务 -->
                <div class="mb-4">
                    <h5 class="service-title">
                        <svg class="bi bi-bell text-warning" width="1em" height="1em" viewBox="0 0 16 16"
                            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z" />
                            <path fill-rule="evenodd"
                                d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
                        </svg>接送服务
                    </h5>
                    <form>
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="pickupLocation">接送地点</label>
                                <select class="form-control" id="pickupLocation">
                                    <option>机场</option>
                                    <option>火车站</option>
                                    <option>其他</option>
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="pickupTime">接送时间</label>
                                <input type="datetime-local" class="form-control" id="pickupTime">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="flightNumber">航班号/车次</label>
                                <input type="text" class="form-control" id="flightNumber" placeholder="如：CA1234">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="carType">车辆类型</label>
                                <select class="form-control" id="carType">
                                    <option>豪华轿车(X500)</option>
                                    <option>商务车</option>
                                    <option>普通轿车</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="mb-4">
                    <div class="form-group">
                        <label for="specialRequest">
                            <svg class="bi bi-chat-square-dots text-warning" width="1em" height="1em" viewBox="0 0 16 16"
                                fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M14 1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.5a2 2 0 0 1 1.6.8L8 14.333 9.9 11.8a2 2 0 0 1 1.6-.8H14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                                <path
                                    d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                            </svg>特别要求</label>
                        <textarea class="form-control" id="specialRequest" rows="3"
                            placeholder="请告诉我们您的任何特殊需求..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页脚-->
    <footer>
        <div class="container">
            <div class="col text-center">
                <!-- 联系我们 -->
                <div class="col-md-12">
                    <h5>联系我们</h5>
                    <div class="contact-info">
                        <p>中国上海市浦东新区某路某号 1288 号</p>
                        <p>电话：400 888 8888</p>
                        <p>邮箱：1111111.com</p>
                    </div>
                </div>
                <!-- 版权与政策 -->
                <div class="col mt-4">
                    <div class="col-12 text-center">
                        <p class="mb-0">&copy; 2023 奢华酒店集团 版权所有</p>
                        <p class="mb-0">
                            <a href="#" class="mr-3">隐私政策</a>
                            <a href="#" class="mr-3">使用条款</a>
                            <a href="#">Cookie 政策</a>
                        </p>
                    </div>
                </div>
            </div>
    </footer>
</body>

</html>